<template>
    <div class='product-details'>
        <div class='details-main'>
            <!-- 轮播 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img :src='details.goods_origin_url'>
                    </div>
                    <div class="swiper-slide">
                       <img :src='details.goods_origin_url'>
                    </div>
                    <div class="swiper-slide">
                       <img :src='details.goods_origin_url'>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class='details-price-box'>
                <div class="sc-kGXeez eBHHsD">
                    <div class="sc-kpOJdX caepzu">
                        <span>
                                    <span class="Price sc-ckVGcZ lmuUPI">
                                        <span style="font-size: 0.35rem;">¥</span>{{details.sprice}}
                        </span>
                        <span class="sc-jKJlTe cikhXQ">￥{{details.oprice}}</span>
                        </span>
                    </div>
                    <span class="sc-iRbamj fdvAUU">{{details.join_number}}</span>
                </div>
                <div class="sc-kkGfuU gnqCN">
                    <p class="sc-iAyFgw eiWZln">{{details.goods_title}}</p>
                    <button class="AddFav sc-hMqMXs djnbop"></button>
                </div>
            </div>
    
            <!-- 折扣 -->
            <div class='discount'>
                <p class='discount-top'>
                    <span class='discount-top-left'>满件折</span>
                    <span class='discount-top-rigth'>满1件7.9折,满2件7折</span>
                </p>
                <p class="sc-feryYK kZCgYS">
                    <span class="sc-cJOK evvHOT">24小时发货</span>
                    <span class="sc-cJOK evvHOT">7天包退</span>
                    <span class="sc-cJOK evvHOT">售后补贴</span>
                </p>
            </div>
    
        </div>
        <Detailtab class='footer' />
    </div>
</template>

<script>
    import Detailtab from 'views/productDetails/components/detail-tabbar.vue'
    import BScroll from 'better-scroll'
    import axios from 'axios'
    import {
        Indicator,
        Toast
    } from 'mint-ui'
    import Swiper from 'swiper'
    export default {
        data(){
            return{
                details:{}
            }
        },
        components: {
            Detailtab
        },
        created(){
             Indicator.open({
                text: '加载中~',
                spinnerType: 'fading-circle'
            });
            axios.get('api/getMemberAboutInfo',{
                params:{
                    goods_id: this.$route.query.id,
                    sa_id: 20667790,
                    is_pt_goods: 0,
                    req_coupons_id: 181609748
                }
            })
            .then(res=>{
                this.details = res.data.skudata.info
                 Indicator.close()
            })
            .catch(err=>console.log(err))
        },
        mounted() {
            new Swiper('.swiper-container', {
                autoplay: true, //可选选项，自动滑动
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction'
                },
    
            })
        }
    }
</script>

<style lang="stylus" scoped>
    .product-details
        display flex
        flex-direction column
        height 100%
        .details-main
            flex 1
            .swiper-container
                width 100%
                height 7.5rem
                .swiper-slide
                    img
                        height 100%
                .swiper-pagination
                    width .72rem
                    height .4rem
                    left auto
                    right .36rem
                    bottom .36rem
                    background rgba(0,0,0,0.5)
                    border-radius .05rem
                    color #fff
                    font-size .2rem
                    line-height .4rem
            .details-price-box
                    background #fff
                    padding .24rem .28rem .2rem
                .sc-kGXeez
                    display flex
                    justify-content space-between
                    .sc-kpOJdX
                        display flex
                        span

                            .Price
                                line-height .56rem
                                color #ff464e
                                margin-right: .08rem
                                font-size .5rem
                            .sc-jKJlTe 
                                    font-size 0.24rem
                                    color #bbbbbb
                                    margin-right 0.2em
                                    text-decoration line-through
                    .fdvAUU 
                        font-size 0.24rem
                        color #999
                        line-height .56rem
            .sc-kkGfuU
                margin .08rem 0 .2rem
                display flex
                font-size .32rem
                justify-content space-between
                align-items flex-start
                p
                    line-height .4rem
                    flex 1
                    color #333
                .djnbop
                    width .48rem
                    height .48rem
                    background url(https://web.juanpi.com/static/media/collect.f8400f03.png) no-repeat 100%
                    border 0
        //折扣
        .discount
            background #fff
            margin-top .2rem
            padding 0 .28rem
            p
                height .96rem
                line-height .96rem
                &.discount-top
                        overflow hidden
                        white-space nowrap
                        text-overflow ellipsis
                        font-size 0.24rem
                        color #333333
                        border-bottom 1px solid #efefef
                        span:nth-of-type(1)
                            background-color #ff464e
                            font-size 0.2rem
                            color #ffffff
                            line-height 1
                            padding 0.02rem 0.04rem
                            margin-right .16rem
                &.kZCgYS
                    font-size 0.26rem
                    color #666666
                    line-height .96rem
                    .evvHOT 
                        margin-right .28rem
                        position relative
                        padding-left 0.16rem

                        &.evvHOT:before 
                            content ''
                            position absolute
                            top 50%
                            -webkit-transform translateY(-50%)
                            -ms-transform translateY(-50%)
                            transform translateY(-50%)
                            left 0
                            width 0.08rem
                            height 0.08rem
                            background #ff464e
                            opacity 0.5
                            border-radius 50%

                        

         
</style>